<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script type="text/javascript" src="/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
    <!--引入JS-->
    <script type="text/javascript" src="/webuploader/webuploader.min.js"></script>



</head>
<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>完整功能（没错，目前工具栏只有这么多）</legend>
</fieldset>


<form method="post" action="/theme/html?act=add">

    <input type="hidden" name="themeId">
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input type="text" name="themeType" required lay-verify="required" placeholder="请输入类型" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="themeTitle" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">图片地址</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="text" id="themePicture" name="themePicture" required lay-verify="required" placeholder="url" autocomplete="off"-->
                   <!--class="layui-input">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <textarea class="layui-textarea" name="themeContent" id="LAY_demo1" style="display: none">
          把编辑器的初始内容放在这textarea即可
        </textarea>
    </div>
    <button  class="layui-btn site-demo-layedit" >提交</button>
</form>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
    </div>
</div>
<div class="site-demo-button" style="margin-top: 20px;">

    <button class="layui-btn site-demo-layedit" data-type="text">获取编辑器纯文本内容</button>
    <button class="layui-btn site-demo-layedit" data-type="selection">获取编辑器选中内容</button>
</div>

<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->


<script type="text/javascript">

    $(function(){
        var uploader = WebUploader.create({
            auto: true, // 选中文件后马上上传
            // 文件接收服务端。
            server: 'http://localhost:7777/theme/upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });

    })

    layui.use('layedit', function(){
        var layedit = layui.layedit
            ,$ = layui.jquery;


        layedit.set({
            uploadImage: {
                url: '/theme/upload' //接口url
                ,type: 'POST' //默认post
            }
        })

        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');

        //编辑器外部操作
        var active = {
            // content: function(){
            //     alert(layedit.getContent(index)); //获取编辑器内容
            // },
            text: function(){
                alert(layedit.getText(index)); //获取编辑器纯文本内容
            }
            ,selection: function(){
                alert(layedit.getSelection(index));
            }
        };

        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });
</script>

</body>
</html>